<template>
  <transition name="fade">
    <div 
      v-if="show" 
      class="fixed top-4 right-4 max-w-sm bg-gray-800 text-white rounded-lg shadow-lg overflow-hidden z-50 flex"
      :class="[
        type === 'success' ? 'border-l-4 border-green-500' : '',
        type === 'error' ? 'border-l-4 border-red-500' : '',
        type === 'info' ? 'border-l-4 border-blue-500' : '',
        type === 'warning' ? 'border-l-4 border-yellow-500' : ''
      ]"
    >
      <div class="p-4 flex">
        <!-- 图标 -->
        <div class="flex-shrink-0 mr-3">
          <!-- 成功图标 -->
          <svg v-if="type === 'success'" class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <!-- 错误图标 -->
          <svg v-if="type === 'error'" class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <!-- 信息图标 -->
          <svg v-if="type === 'info'" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <!-- 警告图标 -->
          <svg v-if="type === 'warning'" class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        
        <!-- 内容 -->
        <div>
          <div class="font-medium">{{ title }}</div>
          <div class="text-sm text-gray-300 mt-1" v-if="message">{{ message }}</div>
        </div>
      </div>
      
      <!-- 关闭按钮 -->
      <button @click="close" class="p-2 text-gray-400 hover:text-white self-start">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </transition>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, watch } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'success', // success, error, info, warning
    validator: (value) => ['success', 'error', 'info', 'warning'].includes(value)
  },
  title: {
    type: String,
    default: ''
  },
  message: {
    type: String,
    default: ''
  },
  duration: {
    type: Number,
    default: 3000 // 默认显示3秒
  },
  autoClose: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['close']);

// 倒计时
let timer = null;

// 监听显示状态变化
watch(() => props.show, (newVal) => {
  if (newVal && props.autoClose) {
    // 如果显示并且设置自动关闭，则设置定时器
    startTimer();
  }
});

// 开始计时
const startTimer = () => {
  // 清除之前的计时器
  if (timer) clearTimeout(timer);
  
  // 设置新的计时器
  timer = setTimeout(() => {
    close();
  }, props.duration);
};

// 关闭提示
const close = () => {
  if (timer) clearTimeout(timer);
  emit('close');
};

// 组件卸载时清除计时器
onMounted(() => {
  if (props.show && props.autoClose) {
    startTimer();
  }
});
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style> 